import React from 'react'
import './chart.less'
import { Chart } from '@antv/g2'
// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)

class Charts extends React.Component {
	constructor(props) {
		super(props)
		this.chartRef = React.createRef()
		this.state = {
			data: [
				{ date: '05-01', num: 8, num1: 11, num2: 12, color: '#EF2015' },
				{ date: '05-08', num: 8, num1: 2, num2: 4, color: '#EF1E86' },
				{ date: '05-15', num: 6, num1: 5, num2: 9, color: '#9A31EF' },
				{ date: '05-22', num: 4, num1: 3, num2: 2, color: '#3429EF' },
				{ date: '05-31', num: 4, num1: 10, num2: 9, color: '#3CB9EF' },
			],
		}
	}

	componentDidMount() {
		this.setChart()
	}

	setChart = () => {
		const { data } = this.state
		const chart = new Chart({
			container: 'c5',
			autoFit: true,
			width: 300,
			height: 200,
		})

		chart.data(data)
		const margin = 1 / data.length
		chart.scale({
			date: {
				range: [margin / 2, 1 - margin / 2],
                sync: true,
			},
			num: {
				min: 0,
				max: 20,
				nice: true,
                sync: true,
			},
            num1: {
                min: 0,
                max: 20,
                nice: true,
                sync: true,
            },
            num2: {
                min: 0,
                max: 20,
                nice: true,
                sync: true,
            },
		})

		// 坐标轴
		// chart.axis('date', {
		// 	label: {
		// 		formatter: (text, item, index) => {
		// 			return data[index].date
		// 		},
		// 	},
		// })
		chart.axis('num', {
			label: {
				formatter: (text) => "",
			},
		})
        chart.axis('num1', {
            label: {
                formatter: (text) => `${Number(text).toFixed(2)}%`,
            },
        })
        chart.axis('num2', {
            label: {
                formatter: (text) => "",
            },
        })

		chart.tooltip({
			showTitle: false,
		})
		// 隐藏折线
		chart.line().position('date*num').shape('smooth').color('', () => '#f59a23').tooltip(false)
		chart.line().position('date*num1').shape('smooth').color('', () => '#F53643').tooltip(false)
		chart.line().position('date*num2').shape('smooth').color('', () => '#F5C228').tooltip(false)

        chart.legend({
            custom: true,
            position: 'bottom',
            flipPage: false,

            items: [
                {
                    name: 'Next30',
                    marker: {
                        symbol: 'square',
                        style: {
                            fill: '#f59a23',
                        },
                    },
                },
                {
                    name: 'Next潜力',
                    marker: {
                        symbol: 'square',
                        style: {
                            fill: '#F53643',
                        },
                    },
                },
                {
                    name: '道琼斯',
                    marker: {
                        symbol: 'square',
                        style: {
                            fill: '#F5C228',
                        },
                    },
                }
            ],
        })

		// .tooltip('date*num', (date, num) => {
		//     return {
		//         showTitle: false,
		//         showMarkers: true,
		//         name: date,
		//         value: num,
		//     }
		// })

		// chart
		//     .point()
		//     .position('date*num*color')
		//     .size(0)
		//     .shape('circle')
		//     .color("transparent")
		//     .tooltip('date*num', (date, num) => {
		//         return {
		//             showTitle: false,
		//             showMarkers: false,
		//             name: date,
		//             value: num
		//         }
		//     })

		// chart.annotation().line({
		// 	top: true,
		// 	start: ['a', 80],
		// 	end: ['e', 80],
		// 	style: {
		// 		stroke: '#f4a240',
		// 		lineWidth: 1,
		// 		lineDash: [3, 3],
		// 	},
		// 	text: {
		// 		position: 'start',
		// 		style: {
		// 			fill: '#f4a240',
		// 			fontSize: 12,
		// 			fontWeight: 500,
		// 		},
		// 		content: '团队均值: 80',
		// 		offsetY: -5,
		// 	},
		// })

		chart.on('click', (ev) => {
			// 获取当前点击的对象
			const records = chart.getSnapRecords({ x: ev.x, y: ev.y })
			if (records && records.length > 0) {
				// 被点击区域的数据
				const data = records[0]._origin
				if (data) {
					console.log(data)
				}
			}
		})
        chart.removeInteraction('legend-filter')
		chart.render()
	}

	render() {
		return (
			<div className={'chart'}>
				<div id="c5" ref={this.chartRef} />
			</div>
		)
	}
}

export default Charts
